{% extends "base.html" %}


{% block content %}

<h2>Sinks</h2>
{% for s in sinks %}
<div>{{s.no}}: {{s.description}}</div>
[{{s.state}}]

Mute:
<input class=mute type="checkbox"
       command=sink_mute
       {{ s.mute == "yes" and "checked=checked" or ""}}
       device="{{s.no}}" />

<span>{{s.volume}}</span>
<input class=vol type=range
       min="0" max="100"
       command=sink_vol
       value="{{s.volume}}"
       device="{{s.no}}" />

<!-- <span>{{s.base_volume}}</span> -->
<!-- <input class=vol type=range -->
<!--        min="0" max="100" -->
<!--        command=sink_basevol -->
<!--        value="{{s.base_volume}}" -->
<!--        device="{{s.no}}" /> -->
<hr>

{% end %}

<h2>Inputs</h2>
{% for i in inputs %}
<div> {{i.no}}: {{i.description}} </div>
[{{i.state}}]

Mute:
<input class=mute type="checkbox"
       command=source_mute
       {{ s.mute == "yes" and "checked=checked" or ""}}
       device="{{i.no}}" />

<span>{{i.volume}}</span>
<input class=vol type=range
       command=source_vol
       min="0" max="100"
       value="{{i.volume}}"
       device="{{i.no}}" />

<!-- <span>{{i.base_volume}}</span> -->
<!-- <input class=vol type=range -->
<!--        command=source_basevol -->
<!--        min="0" max="100" -->
<!--        value="{{i.base_volume}}" -->
<!--        device="{{i.no}}" /> -->
<hr />
{% end %}


<h2>Status</h2>
<div class=info>
  <pre id="status">
  {{status}}
  </pre>
</div>


<script>
console.log("pulse setup");
$(function() {

    function SendCommand(command, device, value) {
        console.log("pulse command: " + command + " " + device + " " + value);
        $.get("/pulse_command",
              {command: command, device: device, value: value});
    }

    var throttle_timer = null;
    function ThrottledSendCommand(command, device, value) {
        clearTimeout(throttle_timer);
        timer = setTimeout(function () {
                               SendCommand(command, device, value);
                           }, 250);
    }
    function VolumeChange(e) {
        var j =  $(this);
        var command = j.attr("command");
        var device = j.attr("device");
        var value = j.attr("value");
        ThrottledSendCommand(command, device, value);
        j.prev().text(value);
    }

    $(".vol").change(VolumeChange);

    function MuteChange(e) {
        var j =  $(this);
        var command = j.attr("command");
        var device = j.attr("device");
        var value = j.attr("checked");
        value = value == "checked" ? "1" : "0";
        ThrottledSendCommand(command, device, value);
    }

    $(".mute").click(MuteChange);
});

</script>


{% end %}
